<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/css/index.css">
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body{
        background-color: #eeeeee;
      }

      .camera-list-title{
        text-align: center;
        background-color: #255625;
      }

      .el-card__header{
        background-color: #27ae60;
        font-size: 20px;
        color: #fff;
      }

      .el-card__body{
        padding: 0;
      }

      .el-table .success-row {
        background: #f0f9eb;
      }
    </style>
  </head>
  <body>
    <div id="app" >
      <el-container style="padding: 15px">
        <el-aside width="300px">
          <div style="padding:20px 0">
            <el-card class="box-card">
              <div slot="header" >
                <span>摄像头列表</span>
              </div>
              <el-table
                      :show-header="false"
                      :data="cameras"
                      @row-dblclick="showVideo"
                      style="width: 100%">
                <el-table-column
                        prop="remark"
                        label="摄像头名称"
                       >
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </el-aside>
        <el-main >
          <video ref="video" src="" style="height:calc(100vh - 90px)"  controls="controls" width="100%" id="video" muted></video>
        </el-main>
      </el-container>
      </div>
    </div>
    <script src="/javascripts/flv.min.js"></script>
    <script src="/javascripts/vue.min.js"></script>
    <script src="/javascripts/element-ui.min.js"></script>
    <script src="/javascripts/axios.min.js"></script>
    <script>
      new Vue({
        el:'#app',
        data(){
          return {
            cameras:[],
            player:null
          }
        },
        mounted(){
          axios.get('/camera/list').then(res=>{
            this.cameras = res.data
          })
        },
        methods:{
          showVideo(row, column, event){
            if(this.player){
              this.player.destroy()
            }
            this.player= flvjs.createPlayer({
              type:'flv',
              url:`http://127.0.0.1:25001/live/${row.id}.flv`,
              isLive: true,
            })

            this.player.attachMediaElement(this.$refs.video)
            this.player.load()
            this.player.play()
          }
        }
      })
    </script>
  </body>
</html>
